<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
  <!--  boostrap4.5.2 cdn加速,否则加载速度很慢 -->
  <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

  <title>模拟支付宝的oauth2授权页面</title>
  <style>
    body {
      background-color: aliceblue;
    }
  </style>
  <script>
    function cancelConsent() {
      document.consent_form.reset();
      document.consent_form.submit();
    }
  </script>
</head>
<body>
<div class="container">
  <div class="py-5">
    <h1 class="text-center text-primary">用户授权确认</h1>
  </div>
  <div class="row">
    <div class="col text-center">
      <p>
        应用
        <a href="https://felord.cn"><span class="font-weight-bold text-primary" th:text="${clientName}"></span></a>
        想要访问您的账号
        <span class="font-weight-bold" th:text="${principalName}"></span>
      </p>
    </div>
  </div>
  <div class="row pb-3">
    <div class="col text-center"><p>上述应用程序请求以下权限<br/>请审阅以下选项并勾选您同意的权限</p></div>
  </div>
  <div class="row">
    <div class="col text-center">
      <form name="consent_form" method="post" action="/oauth2/authorize">
        <input type="hidden" name="client_id" th:value="${clientId}">
        <input type="hidden" name="state" th:value="${state}">

        <div th:each="scope: ${scopes}" class="form-group form-check py-1">
          <input class="form-check-input"
                 type="checkbox"
                 name="scope"
                 th:value="${scope.scope}"
                 th:id="${scope.scope}">
          <label class="form-check-label font-weight-bold" th:for="${scope.scope}" th:text="${scope.scope}"></label>
          <p class="text-primary" th:text="${scope.description}"></p>
        </div>

        <p th:if="${not #lists.isEmpty(previouslyApprovedScopes)}">您已对上述应用授予以下权限：</p>
        <div th:each="scope: ${previouslyApprovedScopes}" class="form-group form-check py-1">
          <input class="form-check-input"
                 type="checkbox"
                 th:id="${scope.scope}"
                 disabled
                 checked>
          <label class="form-check-label font-weight-bold" th:for="${scope.scope}" th:text="${scope.scope}"></label>
          <p class="text-primary" th:text="${scope.description}"></p>
        </div>

        <div class="form-group pt-3">
          <button class="btn btn-primary btn-lg" type="submit" id="submit-consent">
            同意授权
          </button>
        </div>
        <div class="form-group">
          <button class="btn btn-link regular" type="button" id="cancel-consent" onclick="cancelConsent();">
            取消授权
          </button>
        </div>
      </form>
    </div>
  </div>
  <div class="row pt-4">
    <div class="col text-center">
      <p>
        <small>
          需要您同意并提供访问权限。
          <br/>如果您不同意，请单击<span class="font-weight-bold text-primary">取消授权</span>，将不会为上述应用程序提供任何您的信息。
        </small>
      </p>
    </div>
  </div>
</div>
</body>
</html>